<template>
    <div class="el-input password-input">
        <el-input :type="visible ? 'text' : 'password'" v-model="_value" :placeholder="placeholder"/>
        <div class="icon heffect" @click="visible = !visible">
            <View v-show="!visible"/>
            <Hide v-show="visible"/>
        </div>
    </div>
</template>

<script setup>
import { computed, ref } from 'vue'

const emit = defineEmits()

const visible = ref(false)

const props = defineProps({
    modelValue: {
        type: Number,
        default: 0
    },
    placeholder: {
        type: String,
        default: '密码'
    }
})

let _value = computed({
    get() { return props.modelValue },
    set(val) { emit('update:modelValue', val) }
})
</script>

<style lang="scss">
.password-input {
    position: relative;
    .el-input {
        .el-input__wrapper {
            padding-right: 50px !important;
        }
    }
    .icon {
        position: absolute;
        right: 15px;
        width: 20px;
        height: 20px;
        color: #333;
        top: 50%;
        transform: translateY(-50%);
        margin-top: -2px;
    }
}
</style>